<template>

	<view class="content">
		<uni-search-bar placeholder="请输入关键词" radius="100" cancel-button="none" v-model="kw" class="uni-search"
			@confirm="confirm" @clear="clear" />
		<view v-if="blogs.length==0" class="none">
			<image src="/static/icons/nodata.png" mode="widthFix" class="logo"></image>
			<text></text>
		</view>
		<view v-else v-for="(item, index) in blogs" class="item-container" @click="goto(item.id)">
			<text class="item-title">{{item.title}}</text>
			<rich-text :nodes="item.description" class="item-desc"></rich-text>
			<image :src="item.picture" mode="widthFix" class="item-focus"></image>
			<!-- <image :src="item.user.avatar" mode="aspectFill" class="item-avatar"></image> -->
			<image :src="item.user.avatar" mode="aspectFill" class="item-avatar" @click.stop="showBlogger(item.user)">
			</image>
			<view>
				<text v-for="(tag, idx) in item.tags" :key="tag" class="item-tag">{{tag}}</text>
			</view>
			<view class="icon-container">
				<text :class="goodIds.indexOf(item.id)>=0?'iconfont icon-nan ic-red':'iconfont icon-nan ic-gray'"
					@click.stop="changeGood(item.id)"></text>
				<text class="icon-text">{{item.good}}</text>
				<text class="iconfont icon-maiyizengyi icon"></text>
				<text class="icon-text">{{item.comments.length}}</text>
				<text class="iconfont icon-nv icon"></text>
				<text class="icon-text">{{item.readCount}}</text>

			</view>
			<text class="iconfont icon-paihangbang icon-tag" @click.stop="drop(item.id)"></text>
		</view>
		<view class="bottom" v-if="blogs.length==count">
			已到达底部
		</view>
		<dialog-shell title="博主概况" ref="shell">
			<text style="padding: 20rpx;">{{blogger}}</text>
		</dialog-shell>
	</view>

</template>


<script>
	export default {
		data() {
			return {
				textData: '抱歉，没有相关文章',
				blogs: [],
				page: 0,
				size: 3,
				count: -1,
				searching: false,
				kw: '',
				goodIds: [],
				blogger: ''
			}
		},
		//页面加载时触发的钩子函数
		onLoad() {
			this.$noti.add(this.$params.noti_refresh_count, this.notiCount, this)
			this.$noti.add(this.$params.noti_change_good, this.notiGood, this)

			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if (ids) {
				this.goodIds = ids
			}
			//读取缓存，若存在则使用缓存该this.blogs复制，否则调用下面的方法
			let blogs = uni.getStorageSync(this.$params.key_blogs)
			if (blogs) {
				this.blogs = blogs
				this.count = blogs.length
				console.log(blogs[0]);
			} else {
				this.getPagedBlogs() //分页获取博客列表数据
			}

		},
		onUnload() {
			this.$noti.remove(this.$params.noti_refresh_count, this)
			this.$noti.remove(this.$params.noti_change_good, this)
		},
		//页面下拉刷新
		onPullDownRefresh() {
			this.kw = ''
			this.searching = false
			this.page = 0
			this.count = -1
			this.blogs = []
			this.getPagedBlogs() //分页获取博客列表数据
		},
		//页面滚动到底部时触发
		onReachBottom() {
			if (this.searching || this.blogs.length == this.count) {
				return
			}
			this.page++
			this.getPagedBlogs() //分页获取博客列表数据
		},
		methods: {
			refreshComments(cmt) {
				this.blogs.forEach(b => {
					if (b.id == cmt.blogId) {
						b.comments = [...b.comments, cmt]
					}
				})
			},
			showBlogger(user) {
				this.blogger = "作者：" + user.nickName + "\n联系方式：" + user.email
				this.$refs.shell.showDialog()
			},
			notiGood(info) {
				let id = info.id
				let count = info.count
				let ids = uni.getStorageSync(this.$params.key_good_ids)
				if (ids) {
					this.goodIds = ids
				}
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.good = count
					}
				})
			},
			notiCount(info) {
				console.log("接收dao通知");
				let id = info.id
				let count = info.count
				this.refreshReadCount(id, count)

			},
			refreshReadCount(id, count) {
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.readCount = count
					}
				})
			},
			//使用 uni.navigateTo 方法跳转到 ../blog/blog 页面，并且传递一个 id 参数
			goto(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			//用于显示操作菜单，用户可以选择收藏、删除或举报博客。如果选择删除，会弹出确认对话框，由于没有删除权限，会提示用户登录。
			drop(id) {
				uni.showActionSheet({
					itemList: ["收藏", "删除", "举报"],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								uni.showToast({
									title: '功能待完善'
								});
								//switch(res.tapIndex) 通常用于处理 用户在操作菜单（如 uni.showActionSheet 弹出的底部菜单）中选择的选项
								//uni.showToast用于向用户反馈操作结果

								break;
							case 1:
								//uni.showModal用于需要用户明确交互（确认 / 取消）的场景（如删除确认、权限提示、重要操作确认等）
								uni.showModal({
									title: '警告',
									content: '确定要删除吗？',
									showCancel: true, //控制是否显示 “取消” 按钮（布尔值）
									cancelText: '算了', //自定义 “取消按钮” 的文本（字符串，最多 4 个字符）
									confirmText: '删除', //自定义 “确定按钮” 的文本（字符串，最多 4 个字符）
									success: res => {
										//console.log(res);
										if (res.confirm) {
											uni.showToast({
												title: '没有删除权限，请登录！',
												icon: 'none' //隐藏默认图标，仅显示纯文字提示
											});
										}
									},
									fail: () => {},
									complete: () => {}
								});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

			//用于处理博客的点赞和取消点赞操作
			changeGood(id) {
				let good = true //代表当前是点赞还是取消点赞
				if (this.goodIds.indexOf(id) >= 0) {
					good = false
				}
				if (good) {
					//1.把当前blog的id保存到缓存， 2.把点赞数量+1发送到服务器
					this.goodIds = [...this.goodIds, id]
				} else {
					//1.把当前blog的id从缓存的id集合中删除， 2.把点赞数量-1发送到服务器
					let index = this.goodIds.indexOf(id)
					if (index >= 0) {
						//this.goodIds.splice(index, 1) splice靠循环
						//this.goodIds.shift shift删除第一个元素
						//this.goodIds.pop（） pop删除最后一个元素
						this.goodIds[index] = this.goodIds[this.goodIds.length - 1]
						this.goodIds.pop()
					}
				}
				uni.setStorageSync(this.$params.key_good_ids, this.goodIds) //将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
				this.postGood(id, good)

			},
			//用于向服务器发送点赞或取消点赞请求
			postGood(id, good) {
				//uni.showLoading用于显示加载中的提示框，通常在发起网络请求等需要一定时间完成的操作时使用
				uni.showLoading({
					title: '点赞....',
					mask: false //用于控制是否显示透明遮罩层
				});
				let url = this.$params.host
				// this.$params 通常是一个存储了项目各种参数配置的对象。
				// this.$params.host 代表服务器的基础地址
				let action = good ? this.$params.action_good : this.$params.action_del_good
				// good 是一个布尔类型的变量，用于判断当前是点赞操作还是取消点赞操作。
				// this.$params.action_good 是点赞操作对应的接口路径，比如 /api/good。
				// this.$params.action_del_good 是取消点赞操作对应的接口路径，比如 /api/del_good。
				url += action //拼接完整的请求 URL
				let data = {
					"id": id
				}
				//在准备要发送给服务器的数据
				//this.$req.postQuery 是一个自定义的方法，用于发送 POST 请求
				this.$req.postQuery(url, data, res => {
					//请求成功的回调函数
					//console.log(res);
					this.blogs.forEach(blog => {
						if (blog.id == id) {
							blog.good = res.data.data
						}
					})
				}, () => {
					// 请求失败的回调函数
					//uni.hideLoading用途是隐藏通过 uni.showLoading 显示的加载提示框
					uni.hideLoading()
				})
			},

			//用于处理搜索操作
			confirm(e) {
				//console.log(e);
				//console.log(this.kw);
				let kw = e.value

				if (kw.length > 0) {
					this.searching = true
					this.page = 0
					this.count = -1
					this.blogs = []

					//uni.showLoading用于显示加载提示框的 API，它在用户进行某些需要一定时间才能完成的操作（如网络请求、数据加载等）时非常有用

					uni.showLoading({
						title: '搜索中....',
						mask: false
					});
					this.$req.get(this.$params.host + this.$params.action_search + kw, res => {
							console.log(res)
							res.data.data.forEach(blog => {
								blog.picture = this.$params.host + blog.picture
								blog.user.avatar = this.$params.host + blog.user.avatar
								this.blogs = [...this.blogs, blog]
							})
						},
						() => {
							uni.hideLoading()
						})
				}
			},

			//用于清除搜索状态，重置博客列表和页码，并重新获取博客列表
			clear() {
				this.searching = false
				this.blogs = []
				this.page = 0

				//getPagedBlogs获取分页的博客列表数据

				this.getPagedBlogs()
			},

			//用于获取分页的博客列表
			getPagedBlogs() {
				console.log("获取远程数据");
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": this.page,
					"size": this.size
				}
				//getWithParams发送带有参数的 GET 请求
				this.$req.getWithParams(this.$params.host + this.$params.action_blogs_page, header, res => {
					// console.log(res.data);
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					// this.blogs=this.blogs.concat(res.data.data)
					this.blogs = [...this.blogs, ...res.data.data]
					this.count = parseInt(res.data.message)

					//setStorageSync 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
					uni.setStorageSync(this.$params.key_blogs, this.blogs)

				}, () => {
					//stopPullDownRefresh停止当前页面下拉刷新
					uni.stopPullDownRefresh()
				})
			},

			//用于获取置顶的博客列表
			getTopBlogs() {
				this.$req.get(this.$params.host + this.$params.action_top_blogs, res => {
					console.log(res.data);
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					this.blogs = res.data.data
				});
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>